<!-- 发视频 -->
<template>
  <a-page-header
    :style="{ background: 'var(--color-bg-2)' }"
    @back="back"
    title="发视频"
  >
  </a-page-header>
  <div class="wrap">
    <a-layout class="layout">
      <a-layout-sider>
        <a-scrollbar style="height: calc(100vh - 102px); overflow: auto">
          <div style="height: 2000px; text-align: center">
            <h3>上传列表</h3>

            <a-button type="outline" size="large">
              <template #icon>
                <icon-plus />
              </template>
              新增视频</a-button
            >
          </div>
        </a-scrollbar>
      </a-layout-sider>
      <a-layout-content class="layout-content">
        <h2>大萨达撒大所</h2>
        <a-form
          :model="form.data"
          @submit="handleSubmit"
          auto-label-width
          size="large"
          :rules="rules"
        >
          <a-form-item field="img" label="封面" show-colon>
            <a-upload
              action="/"
              :fileList="file ? [file] : []"
              :show-file-list="false"
              @change="onChange"
              @progress="onProgress"
            >
              <template #upload-button>
                <div
                  :class="`arco-upload-list-item${
                    file && file.status === 'error'
                      ? ' arco-upload-list-item-error'
                      : ''
                  }`"
                >
                  <div
                    class="arco-upload-list-picture custom-upload-avatar"
                    v-if="file && file.url"
                  >
                    <img :src="file.url" style="width: 440px" />
                    <div class="arco-upload-list-picture-mask">
                      <IconEdit />
                    </div>
                    <a-progress
                      v-if="file.status === 'uploading' && file.percent < 100"
                      :percent="file.percent"
                      type="circle"
                      size="mini"
                      :style="{
                        position: 'absolute',
                        left: '50%',
                        top: '50%',
                        transform: 'translateX(-50%) translateY(-50%)'
                      }"
                    />
                  </div>
                  <div
                    class="arco-upload-picture-card"
                    v-else
                    style="width: 300px; height: 220px"
                  >
                    <div class="arco-upload-picture-card-text">
                      <IconPlus />
                      <div style="margin-top: 10px; font-weight: 600">
                        请上传视频封面
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </a-upload>
          </a-form-item>
          <a-form-item field="title" label="标题" show-colon>
            <a-input
              v-model="form.data.title"
              placeholder="请输入标题"
              :max-length="40"
              show-word-limit
              style="height: 40px; width: 440px"
            />
          </a-form-item>
          <a-form-item field="intro" label="简介" show-colon>
            <a-textarea
              style="width: 440px"
              :max-length="300"
              show-word-limit
              :auto-size="{
                minRows: 5
              }"
              placeholder="填写视频简介，让更多人找到你的视频"
              v-model="form.data.intro"
            ></a-textarea>
          </a-form-item>
          <a-form-item field="region" label="所属领域" show-colon>
            <a-select
              placeholder="请选择"
              v-model="form.data.region"
              style="width: 220px"
            >
            </a-select>
          </a-form-item>
          <a-form-item field="topic" label="绑定话题" show-colon>
            <a-button type="text">
              <template #icon>
                <icon-plus />
              </template>
              新增话题(至少新增一个)</a-button
            >
          </a-form-item>
          <a-form-item field="type" label="视频类型" show-colon>
            <a-radio-group v-model="form.data.type">
              <a-radio :value="1">原创</a-radio>
              <a-radio :value="2">转载</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item field="isScheduled" label="定时发布" show-colon>
            <a-switch v-model="form.data.isScheduled" />
          </a-form-item>
        </a-form>
        <div class="btns">
          <a-button style="margin-right: 20px">取消发布</a-button>
          <a-button type="primary">发布文章</a-button>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>
<script setup lang="ts">
const router = useRouter();
const back = () => {
  router.back();
};

const form = reactive({
  data: {
    img: '', // 封面
    title: '', // 标题
    intro: '', // 简介
    region: '', // 所属领域
    topic: '', // 话题
    type: 1, //  视频类型
    isScheduled: false // 是否定时发布
  }
});

const rules = {
  img: [
    {
      required: true,
      message: '请上传视频封面'
    }
  ],
  title: [
    {
      required: true,
      message: '请输入标题'
    }
  ],
  region: [
    {
      required: true,
      message: '请选择'
    }
  ],
  topic: [
    {
      required: true,
      message: '请至少新增一个话题'
    }
  ],
  type: [
    {
      required: true,
      message: '请选择'
    }
  ]
};
</script>
<style lang="less" scoped>
.wrap {
  position: relative;
  // padding: 20px;
  width: 80%;
  left: 10%;

  .layout {
    height: calc(100vh - 102px);

    &-content {
      padding: 0 20px;
      background-color: #fff;
    }
    .btns {
      background-color: var(--color-bg-2);
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
  }
}
</style>
